<template>
  <div class="box">
    <mt-header title="宠物百科" fixed style="background: #f49b00">
      <router-link to="/" slot="left">
        <mt-button icon="back"></mt-button>
      </router-link>
      <!-- <mt-button icon="more" slot="right"></mt-button> -->
    </mt-header>
    <div style="height: 40px"></div>
    <!-- 搜索框 -->
    <!-- <van-search
      @keyup.enter="goto"
      @click="goto"
      v-model="msg"
      placeholder="请输入搜索关键词"
      shape="round"
      background="#fcfcfc"
    /> -->

    <!-- 搜索框 -->
    <div class="search">
      <input
        @keyup.enter="goto"
        v-model="msg"
        id="input"
        background="#fcfcfc"
        type="text"
        placeholder="请输入您要搜索的内容"
      />
      <van-icon @click="goto" name="search" size="30px" />
    </div>

    <div class="container">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="猫" id="0" />
        <van-sidebar-item title="狗" id="1" />
      </van-sidebar>

      <div class="list">
        <router-view></router-view>
      </div>
    </div>
    <div style="height:7vh"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      msg: "", // 搜索框信息
      // activeKey: this.$route.path.split("/").pop(),
      activeKey: 0,
    };
  },
  watch: {
    activeKey(to, from) {
      //tabSelected变化时自动执行
      // 判断一下，防止路由重复跳转
      if (this.activeKey == this.$route.path.split("/").pop()) {
        return; // 重复路由，不需要跳转
      }
      console.log("点击了底部选项卡：", to);
      if (to == "0") {
        this.$router.push("/home/adoptm/mao");
      } else if (to == "1") {
        this.$router.push("/home/adoptm/gou");
      }
    },
  },
  methods: {
    // 搜索方法
    goto() {
      const path = `/adoptm/adoptmesssearch?msg=${this.msg}`;
      // 如果当前路径和要跳转的路径相同则终止
      if (this.$route.path == path) return;
      this.$router.push(path);
      this.msg = ""; // 清空输入框的内容
    },
  },
};
</script>

<style lang="scss" scoped>
.box {
  background-color: #fbf7f7;
}
.container {
  display: flex;

  /* // flex-direction: row; */
}
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.search {
  display: flex;
  align-items: center;
  justify-content: center;
  input {
    width: 100%;
    margin: 8px 0;
    padding: 5px;
    border: 0;
    border-radius: 40px;
    text-align: center;
  }
}

::v-deep .mint-header-title{
  font-size: 15px;
}
</style>
